<template>
  <div>
     <!--只有一些css样式引用-->
        <lab_head  />
         <!--页头部导航-->
        <lab_header  />
    <div class="total_count">全部商品<em>{{total_count}}</em>件</div>
    <ul class="cart_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>
        <li class="col06">操作</li>
    </ul>
    <ul class="cart_list_td clearfix" v-for="(sku,index) in cart" :key="index">
        <li class="col01"><el-checkbox v-model="sku.flag" @change="handleCheckedCitiesChange(index,sku.flag)"></el-checkbox></li>
        <li class="col02"><img :src="sku.url"></li>
        <li class="col03">{{ sku.name }}</li>
        <li class="col05">{{ sku.price }}元</li>
        <li class="col06">
            
            <div class="num_add">
                <a @click="on_add(sku.id,1)" class="add fl">+</a>
                <input v-model="sku.number" @focus="origin_input=sku.count" @blur="on_input(index)" type="text" class="num_show fl">
                <a @click="on_add(sku.id,2)" class="minus fl">-</a>
            </div>
        </li>
        <li class="col07">{{sku.total}}元</li>
        <li class="col08"><a @click="on_delete(index)">删除</a></li>
    </ul>

    <ul class="settlements">
        <li class="col01"><el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></li>
        <li class="col02"></li>
        <li class="col03">合计(不含运费)：<span>¥</span><em>{{tmoney}}</em><br>共计<b>{{tcount}}</b>件商品</li>
        <li class="col04"><a href="place_order.html">去结算</a></li>
    </ul>
      <lab_footer  />
  </div>
</template>

<script>
import lab_head from './common/lab_head';
import lab_header from './common/lab_header';
import lab_footer from './common/lab_footer';
export default {
    data(){
        return{
            cart:[],
            userid:0,
            tmoney:0,
            tcount:0,
            checkAll: true,
            checkedCities: [],
            isIndeterminate: true
        }
    },
    methods:{
        checkllmes(){
            var resflag = true
                for (var i=0;i<this.cart.length;i++){
                    if(this.cart[i]['flag'] == false){
                        resflag = false
                    }
                }
                this.checkAll = resflag
                this.isIndeterminate = resflag
        },
        handleCheckAllChange(val) {
            this.isIndeterminate = val
            for (var i=0;i<this.cart.length;i++){
                this.cart[i]['flag'] = val
            }
            // 向接口发起请求
            this.axios.get('course/modifyAllstatus?userid='+this.userid+"&status="+val).then(res=>{

            })
        },
        handleCheckedCitiesChange(index,flag) {
            if(flag == true){
                this.cart[index]['flag'] = true
            }else{
                this.cart[index]['flag'] = false
            }
            this.userid = localStorage.getItem("userid")
            // 调用接口改变状态
            var cid = this.cart[index]['id']
            this.axios.get("course/modifyStatus?userid="+this.userid+"&cid="+cid).then(res=>{
                // 遍历cart
                this.checkllmes()
            })
        },

        getmycart(){
            this.userid = localStorage.getItem("userid")
            this.axios.get("course/mycart?userid="+this.userid).then(res=>{
                this.cart = res.data.glist
                this.tcount = res.data.tcount
                this.tmoney = res.data.tmoney
            })
        },
        on_add(gid,type){
            this.axios.post('course/buy?userid='+this.userid+"&tcourseid="+gid+"&type="+type).then(res=>{
                // this.getmycart()
                // vue更新
                // 小计、总金额、总件数
                // 遍历List
                if (res.data.code==200){
                    var len = this.cart.length
                    for (var i=0;i<len;i++){
                        if(this.cart[i]['id'] == gid){
                            if(type==1){
                                this.tcount = this.tcount+1
                                this.tmoney = this.tmoney+this.cart[i]['price']
                                this.cart[i]['total'] = this.cart[i]['total']+this.cart[i]['price']
                                this.cart[i]['number'] = parseInt(this.cart[i]['number'])+1
                            }else{
                                this.tcount = this.tcount-1
                                this.tmoney = this.tmoney-this.cart[i]['price']
                                this.cart[i]['total'] = this.cart[i]['total']-this.cart[i]['price']
                                this.cart[i]['number'] = parseInt(this.cart[i]['number'])-1
                            }
                        }
                    }
                }else{
                    alert(res.data.code)
                }
            })
        }
    },
    mounted(){
        this.getmycart()
    },
     //定义组建标签
    components:{
        lab_head,
        lab_header,
        lab_footer,
    },

}
</script>

<style>
.total_count{
	width:1200px;margin:0 auto;height:40px;line-height:40px;font-size:14px;
}
.total_count em{
	font-size:16px;color:#ff4200;margin:0 5px;
}

.cart_list_th{width:1198px;border:1px solid #ddd;background-color:#f7f7f7;margin:0 auto;}
.cart_list_th li{height:40px;line-height:40px;float:left;text-align:center;}
.cart_list_th .col01{width:36%;}
.cart_list_th .col02{width:6%;}
.cart_list_th .col03{width:13%;}
.cart_list_th .col04{width:12%;}
.cart_list_th .col05{width:15%;}
.cart_list_th .col06{width:18%;}

.cart_list_td{width:1198px;border:1px solid #ddd;background-color:#fff9f9;margin:0 auto;margin-top:-1px;}
.cart_list_td li{height:120px;line-height:120px;float:left;text-align:center;}

.cart_list_td .col01{width:4%;}
.cart_list_td .col02{width:12%;}
.cart_list_td .col03{width:20%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.cart_list_td .col04{width:6%;}
.cart_list_td .col05{width:13%;}
.cart_list_td .col06{width:12%;}
.cart_list_td .col07{width:15%;}
.cart_list_td .col08{width:18%;}

.cart_list_td .col02 img{width:100px;height:100px;border:1px solid #ddd;display:block;margin:10px auto 0;}
.cart_list_td .col03{height:48px;text-align:left;line-height:24px;margin-top:38px;}
.cart_list_td .col03 em{color:#999}
.cart_list_td .col08 a{color:#666}

.cart_list_td .col06 .num_add{width:98px;height:28px;border:1px solid #ddd;margin:40px auto 0;}
.cart_list_td .col06 .num_add a{width:29px;height:28px;line-height:28px;background-color:#f3f3f3;font-size:14px;color:#666}
.cart_list_td .col06 .num_add input{width:38px;height:28px;text-align:center;line-height:30px;border:0px;display:block;float:left;outline:none;border-left:1px solid #ddd;border-right:1px solid #ddd;}


.settlements{width:1198px;height:78px;border:1px solid #ddd;background-color:#fff4e8;margin:-1px auto 0;}
.settlements li{line-height:78px;float:left;}
.settlements .col01{width:4%;text-align:center}
.settlements .col02{width:12%;}
.settlements .col03{width:69%; height:48px; line-height:28px;text-align:right;margin-top:10px;}
.settlements .col03 span{color:#ff0000;padding-right:5px}
.settlements .col03 em{color:#ff3d3d;font-size:22px;font-weight:bold;}
.settlements .col03 span{color:#ff0000;}
.settlements .col03 b{color:#ff0000;font-size:14px;padding:0 5px;}

.settlements .col04{width:14%;text-align:center;float:right;}
.settlements .col04 a{display:block;height:78px;background-color:#ff3d3d;text-align:center;line-height:78px;color:#fff;font-size:24px}


.common_title{width:1200px;margin:20px auto 0;font-size:14px;}

.common_list_con{width:1200px;border:1px solid #dddddd;border-top:2px solid #e3101e;margin:10px auto 0;background-color:#f7f7f7;position:relative;}

.common_list_con dl{margin:20px;}
.common_list_con dt{font-size:14px;font-weight:bold;margin-bottom:10px}
.common_list_con dd{margin-bottom:10px;}
.common_list_con dd.current{font-size:14px;font-weight:bold;}
.common_list_con dd input{vertical-align:bottom;margin-right:10px}

.edit_site{position:absolute; right:20px;top:30px;width:100px;height:30px;background-color:#fe0000;text-align:center;line-height:30px;color:#fff}

.pay_style_con{margin:20px;}
.pay_style_con input{float:left;margin:14px 7px 0 0;}
.pay_style_con label{float:left;border:1px solid #ccc;background-color:#fff;padding:10px 10px 10px 40px;margin-right:25px}

/* 把标签默认的间距设为0 */
body,ul,ol,p,h1,h2,h3,h4,h5,h6,dl,dd,select,input,textarea,form{margin:0;padding:0}

/* 让h标签文字大小继承body的文字设置 */
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

/* 去掉列表默认的图标 */
ul,ol{list-style:none;}

/* 去掉em默认的斜体 */
em{font-style: normal;}

/* 去掉a标签默认的下划线 */
a{text-decoration:none;}


/* 去掉加链接时产生的框线 */
img{border:0;}

/* 清除浮动 */
.clearfix:before,.clearfix:after{content:"";display:table}
.clearfix:after{clear:both;}
.clearfix{zoom:1}

/* 浮动 */
.fl{float:left}
.fr{float:right}

</style>